import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import UserInfoCop from "@/components/user/userInfoCop";
import { LoginWrap } from "./style";
import { myUserDetailAction } from "../../store/actionType";
import { getSizeImage } from "@/utils/format-utils";
import { loginStatus } from "@/services/login";

export default memo(function LoginBox() {
  const dispatch = useDispatch();

  const [info, setInfo] = useState();

  const userid =
    info && info.length !== 0
      ? info.data.account
        ? info.data.account.id
        : ""
      : "";

  useEffect(() => {
    if (userid) {
      dispatch(myUserDetailAction(userid));
    }
    loginStatu();
  }, [dispatch, userid]);

  async function loginStatu() {
    const a = await loginStatus();
    setInfo(a);
  }

  const { myInfo } = useSelector(
    (state) => ({
      myInfo: state.getIn(["recommend", "myUserInfo"]),
    }),
    shallowEqual
  );

  const userID = myInfo.code === 200 ? myInfo.profile.userId : "";

  return (
    <LoginWrap>
      {info && info.data ? (
        <div className="is-login">
          <div className="info-img">
            <a href="#/">
              <img
                src={getSizeImage(
                  myInfo.code === 200 ? myInfo.profile.avatarUrl : "",
                  62
                )}
                alt=""
              />
            </a>

            <h5>{myInfo.code === 200 ? myInfo.profile.nickname : ""}</h5>
            <p>
              <a className="icon2" href="#/">
                9<i className="lvright icon2"></i>
              </a>
            </p>
          </div>
          <UserInfoCop myInfo={myInfo} userID={userID} />
        </div>
      ) : (
        <div className="no-login">
          <span className="loginBox-text">
            登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
          </span>
          <button className="loginButton sprite_02">用户登录</button>
        </div>
      )}
    </LoginWrap>
  );
});
